<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();    

    var summaryTemplate = new Ext.XTemplate(
        '<table width="100%" border="0" cellpadding="3" cellspacing="0">',
        '<tpl for="prices">',
            '<tr>',
                '<td>({[values.unit.id]}) {[values.unit.name]}</td>',
                '<td align="left">{[values.total_sub]}</td>',
            '</tr>',
            '<tpl for="summary_rows">',
            '<tr>',
                '<td>{[values.name]}</td>',
                '<td align="left">{[values.total_amount]}</td>',
            '</tr>',
        '</tpl>',
        '</tpl>',
        '<tpl for="reservation_summary_rows">',
            '<tr>',
                '<td>{[values.name]}</td>',
                '<td align="left">{[values.total_amount]}</td>',
            '</tr>',
        '</tpl>',
        '<tr>',
            '<td>'+RM.Translate.User.MyReservations.Pay.ReservationTotal+'</td>',
            '<td align="left">{reservationTotal}</td>',
        '</tr>',
        '<tr>',
            '<td colspan="2"><hr/></td>',
        '</tr>',
        '<tr>',
            '<td>'+RM.Translate.User.MyReservations.Pay.ReservationTotalPaid+'</td>',
            '<td align="left">{reservationTotalPaid}</td>',
        '</tr>',
        '<tr>',            
            '<td>'+RM.Translate.User.MyReservations.Pay.ReservationTotalDue+'</td>',
            '<td align="left"><b>{reservationTotalDue}</b></td>',
        '</tr>',
        '</table>'
    );

    var summaryPanel = new Ext.Panel({
        id : "rm_myreservations_list_total_panel",
        anchor: '100%',
        height: 200,
        bodyStyle: 'padding: 10px',
        title: RM.Translate.User.MyReservations.List.TotalBreakdown,
        renderTo: 'rm_myreservations_list_total'
    });

    if (typeof(RM_MyReservations_List_Grid) !== 'undefined') {
        RM_MyReservations_List_Grid.getSelectionModel().addListener(
            'rowselect',
            function(selectionModel, rowNumber, record){
                myMask = new Ext.LoadMask('rm_myreservations_list_total_panel', {msg:RM.Translate.Common.PleaseWait});
                myMask.show();

                Ext.Ajax.request({
                    url : RM.Common.AssembleURL({
                        controller: 'MyReservations_List',
                        action: 'infoJson'
                    }),
                    params: {
                        reservationID: record.data.reservation_id
                    },
                    method: 'POST',
                    success: function(responseObject) {
                        myMask.hide();
                        var reservationJson = Ext.util.JSON.decode(responseObject.responseText);
                        summaryPanel.body.update(summaryTemplate.applyTemplate(reservationJson.info));
                        summaryPanel.doLayout();
                    },
                    failure: function() {
                        myMask.hide();
                        Ext.Msg.alert('Status', RM.Translate.Common.UnableToShow);
                    }
                });
            }
        );
    }
});
</script>
<div id="<?php echo $this->panel->getDivID() ?>">
    <div id="rm_myreservations_list_total"></div>
</div>